{% extends "./nav.html" %} {# 引入宏 #} {% import './macros/blog-list.html' as list %} {% import './macros/loadMore.html' as loadBtn %} {% import './macros/user-info.html' as user %} {% import './macros/fans.html' as fans %} {% import './macros/follow.html'
as follow %} {% import './macros/input.html' as inputTag %} {% block headCss %}
<link rel="stylesheet" href="/css/home.css"> {% endblock %} {% block content %}
<!-- <h1>栅格系统，竖向分成12格</h1> -->
<div class="container">
    <div class="row">
        <!-- 左侧 -->
        <div class="col-lg-8 left coll-sm-8">
            {{inputTag.input()}}
            <!-- 博客列表 -->
            <div class="item-wrapper">
                {% if blogList.length > 0 %} {{ list.list(blogList,isCanReply = true) }} {% else %}
                <p>暂无数据</p>
                {% endif %}
            </div>
            {{ loadBtn.loadMore(pageIndex,pageSize,count,isCanReply=true,api='/api/blog/loadHomeBlogMare/') }}
        </div>
        <!-- 右侧 -->
        <div class="col-lg-4 right coll-sm-4">
            <!-- 个人信息 -->
            {{user.userInfo( user = userData.userInfo, isMe = userData.isMe, isMeFollow = userData.isMeFollow,atCount = userData.atCount )}}
            <div>
            </div>
            <!-- 粉丝列表 -->
            {{fans.showFans(count=userData.fansData.count,userList=userData.fansData.fansList) }}
            <hr>
            <div>
            </div>
            <!-- 关注列表 -->
            {{follow.showFollow(count = userData.followData.count, userList = userData.followData.followList )}}
        </div>
    </div>


</div>
</div>

{% endblock %} {%block js %}

<script>
    $("#img-upload").click(function(e) {
        e.preventDefault();
        // 触发$(“#file-img”)jquery 对象的点击事件
        $("#file-img").click();
    })
    $("#file-img").change(function() {
            // 获取到图片信息
            const file = $(this)[0].files[0];
            ajax.upload('/api/upload', file, function(err, data) {
                if (err) {
                    alert(err);
                    return;
                }
                // console.log(data);
                $(".img-info").text(file.name);
                $("#file-img-url").val(data.url);
            })
        })
        //  发布微博
    $("#btn-publish").click(function(e) {
            e.preventDefault();

            // 获取内容，获取图片地址
            const content = $("#blog-content").val();
            // 1.获取图片地址，代码补全
            const images = $("#file-img-url").val();
            if (!content) {
                alert("发表的内容不能为空");
                return;
            }
            const data = {
                content
            };
            if (images) { // 如果上传图片
                data.images = images;
            }
            // 2.传递内容和图片地址
            ajax.post("/api/blog/createBlog", data, function(err, data) {
                if (err) {
                    alert(err);
                    return;
                }
                alert("发表成功")
                    // 刷新页面
                location.href = "";
                console.log(data);
            })
        })
        // @功能
    $('#blog-content').atwho({
            at: "@",
            data: '/api/user/getAtList',
        })
        // 回复功能
        // on(event,selector,fn)事件委托
        // $(".col-lg-8").on("reply", "click", (function(e) {
        //     // 阻止默认行为
        //     e.preventDefault();
        //     const nickName = $(this).attr('data-nick-name');
        //     const userName = $(this).attr('data-user-name');
        //     const content = $(this).attr('data-content');
        //     //   //@张三-zahngsan xxxxx
        //     const $replyStr = `// @${nickName} - ${userName} ${content}`;
        //     $("#blog-content").val($replyStr);
        //     // 获取焦点
        //     // 获取$("#blog-content")[0] 原生dom对象
        //     $("#blog-content")[0].focus();
        //     $("#blog-content")[0].setSelectionRange(0, 0);
        // }));
</script>
{% endblock %}